<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>条件渲染</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- 使用 v-show 作条件渲染 -->
      <h2 v-show="false">欢迎来到{{name}}</h2>
      <!-- v-show="false"隐藏元素,为元素添加 display:none -->
      <h2 v-show="1===1">欢迎来到{{name}}</h2>
      <!-- v-if="xx" xx可以为boolean类型,表达式,数据变量-->
      <h2 v-show="a">欢迎来到{{name}}</h2>
      <!-- 使用 a的值动态控制显示隐藏 -->

      <!-- 使用 v-if 作条件渲染 -->
      <h2 v-if="false">欢迎来到{{name}}</h2>
      <!-- v-if="false" 会将DOM元素删除 -->
      <h2 v-if="1 === 1">欢迎来到{{name}}</h2>

      <h2>当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>

      <!-- 元素切换频繁时,使用v-show 不删除DOM节点-->
      <div v-show="n === 1">Angular</div>
      <div v-show="n === 2">React</div>
      <div v-show="n === 3">Vue</div>

      <!-- v-if v-else-if和v-else -->
      <!-- 元素切换不频繁时,使用v-if 会删除DOM节点-->
      <div v-if="n === 1">Angular</div>
      <div v-else-if="n === 2">React</div>
      <!-- <div>aa</div> 中间不能存在其它的DOM元素 -->
      <div v-else-if="n === 3">Vue</div>
      <div v-else>其他</div>

      <!-- v-if 与 template 的配合使用 -->
      <!-- template不会被渲染,不会破坏DOM结构,但 tempaate只能配合 v-if 使用 -->
      <template v-if="n===1"> 
        <h2>你好</h2>
        <h2>xx</h2>
        <h2>北京</h2>
      </template>

    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        // data中的数据发生改变整个模板将会重新进行解析
        name: "Vue.js",
        a: false,
        n: 0,
      },
    });
  </script>
</html>
